<template>
  <uni-nav-bar title="充值领福利" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <image :src="newPeo1" style="width:100%;height:468rpx"></image>
  <view class="column doumn">
    <image :src="newPeo2" @click="redirectTo('mine/Recharge')"></image>
    <view class="title">说明：{{contents}}</view>
  </view>
</template>

<script setup lang="ts">
  import { navBack, redirectTo } from '@/utils/navigator';
  import { newPeo1, newPeo2 } from '@/utils/Static';
  import { toPublish } from '@mqtt';
  import { checkXin } from '@/gql/gemstone';
  import { authorMe } from '@/gql/user';
  import { ref } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import { getDriverID } from '@/stores/driverID';
  const driver_id = getDriverID();
  const is_Show = ref()
  const contents = ref()
  onShow(() => {
    init()
  })
  function init() {
    const payload = {
      query: checkXin,
      variables: {
        driver_id,
      },
    };
    toPublish(
      'ql/score/checkXin',
      payload,
      (obj : any) => {
        const { checkXin } = obj.data;
        is_Show.value = checkXin.is_new;
      }
    );
  }
  content()
  function content() {
    const payload = {
      query: authorMe,
      variables: { code: 'czlfl' },
    };
    toPublish('ql/driver/getMyblock', payload, (obj : any) => {
      const { data } = obj;
      contents.value = data.get_myblock.content;
    });
  }
</script>

<style scoped lang="less">
  body {
    background-color: #63A5FB;
  }

  .doumn {
    width: 100%;
    background-color: #63A5FB;
    margin-top: -20rpx;
    image {
      width: 700rpx;
      height: 463rpx;
    }
    .title{
       width: 700rpx;
       color: #FFFFFF;
       margin-top:20rpx;
    }
  }

  .recharge {
    width: 99%;
    margin: 10rpx 0% 10rpx 1%;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    border-top: 3px solid #000;

    .text {
      width: 506rpx;
      height: 98rpx;
      background: #BD4836;
      font-size: 45rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 98rpx;
      margin: 0px auto;
    }

    .but {
      margin: 30rpx auto 10rpx;
      width: 506rpx;

      view:nth-of-type(1) {
        width: 40rpx;
        height: 100rpx;
        border-radius: 40rpx;
        padding: 15rpx 0px;
        box-sizing: border-box;
        background-color: #DCD3D1;
        text-align: center;
        line-height: 35rpx;
        color: #552720;
        box-sizing: border-box;
        font-size: 26rpx;
      }
    }
  }
</style>